<template>
  <div class="app">
    <div class="block">
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="item in 6" :key="item">
          <h3 class="medium">{{ item }}</h3>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-divider>main</el-divider>
        </el-col>
        <el-col :span="12">
          <el-divider>bookshelf</el-divider>
          <bookshelf-component v-if="getUser!=undefined"/>
          <el-divider>偏好</el-divider>
          <HobbyComponent/>
          <div v-if="getUser==undefined" style="width: 100%;text-align: center">
            <h1>请登录</h1>
          </div>
        </el-col>
      </el-row>
    </div>

  </div>

</template>

<script>
import HobbyComponent from "@/view/content/HobbyComponent";
export default {
  name: "HomePageContentComponent",
  props: {},
  data() {
    return {}
  }, methods: {}, watch: {}, computed: {
    getUser(){
      return this.$store.state.user;
    },
    bookshelf() {
      return this.$store.state.user.bookshelf;
    }
  },components:{
    HobbyComponent,
    BookshelfComponent
  }
}
import BookshelfComponent from './BookshelfComponent'
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  /*line-height: 200px;*/
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>